<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="assets/css/vendor/management.css">
    <link rel="stylesheet" type="text/css" href="assets/css/vendor/FlowerList.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">

</head>

<body>


<div class="tz_content">

    <!--t_left start-->
    <div class="t_left">
        <div class="l_logo"></div>
        <div class="l_nav">
            <ul>
                <li>
                    <a href="management index.html">
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a href="flower List.html">
                        <span>商品管理</span>
                    </a>
                </li>
                <li class="active">
                    <a href="order List.html">
                        <span>订单管理</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!--t_left end-->

    <!--t_header start-->
    <div class="t_header">
        <!--h_info start-->
        <div class="h_info">
            <div class="h_user">当前用户：business , 身份：商家</div>
            <div class="h_out">
                <a href="login.html">
                    <span>退出</span>
                    <i></i>
                </a>
            </div>
        </div>
        <!--end h_info-->

    </div>
    <!--end t_header-->


    <!--t_right start-->
    <div class="t_right">

        <!--r_location start-->
        <div class="r_location">
            <i></i>
            <p>您当前所在位置：首页 > 订单管理</p>
        </div>
        <!--end r_location-->

        <!--r_message start-->
        <div class="r_message">
            <div id="controls">
                <button onclick="addRow()">添加行</button>
            </div>

            <table id="myTable">
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>名称</th>
                    <th>顾客ID</th>
                    <th>数量</th>
                    <th>订单时间</th>
                    <th>总金额</th>
                    <th>评论</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>项目A</td>
                    <td>4.5</td>
                    <td>3.8</td>
                    <td>5.0</td>
                    <td>4.2</td>
                    <td>4.7</td>
                    <td></td>
                </tr>
                <!-- 更多的数据行... -->
                </tbody>
            </table>
            <div class="clear"></div>
        </div>
        <!--end r_message-->

    </div>
    <!--end t_right-->

</div>


</body>

</html>
<script>
    var del = document.getElementsByClassName('a_del')
    for (let i = 0; i < del.length; i++) {
        del[i].onclick = function () {
            del[i].parentNode.parentNode.parentNode.remove()
        }
    }
</script>
<script>
    // 假设的添加行函数
    function addRow() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(-1); // 在表格末尾添加行
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);

        cell1.innerHTML = "新ID"; // 这里可以添加更复杂的逻辑来生成唯一的ID
        cell2.innerHTML = "新名称"; // 可以添加输入框让用户输入名称
        cell3.innerHTML = "新ID"; // 这里可以添加更复杂的逻辑来生成唯一的ID
        cell4.innerHTML = "新名称"; // 可以添加输入框让用户输入名称
        cell5.innerHTML = "新ID"; // 这里可以添加更复杂的逻辑来生成唯一的ID
        cell6.innerHTML = "新名称"; // 可以添加输入框让用户输入名称
        cell7.innerHTML = "新ID"; // 这里可以添加更复杂的逻辑来生成唯一的ID
        cell8.innerHTML = '<button onclick="editRow(this)">修改</button> <button onclick="deleteRow(this)">删除</button>';
    }

    // 修改行的逻辑（这里只是简单示例，实际中需要更多代码）
    function editRow(btn) {
        alert('点击了修改按钮，但这里没有实现具体的修改逻辑');
    }

    // 删除行的函数
    function deleteRow(btn) {
        var row = btn.parentElement.parentElement; // 获取按钮所在的行
        row.parentNode.removeChild(row); // 从表格中删除该行
    }
</script>